<template>
  <div @click="onCancel">
    <van-popup v-model="show" round position="bottom" :style="{ height: '40%' }">
      <van-picker
        :title="title"
        show-toolbar
        :columns="columns"
        :default-index="index"
        @confirm="onConfirm"
        @cancel="onCancel"
        @change="onChange"
      />
    </van-popup>
  </div>

</template>

<script>
  import {Picker, Popup} from 'vant'

  Vue.use(Popup)
  Vue.use(Picker)
  export default {
    name: 'pickerGender',
    props: ['show', 'columns','title','index'],
    methods: {
      hideMask(){
        console.log('as')
      },
      onConfirm (value, index) {
        this.$emit('pickData', value)
        // Toast(`当前值：${value}, 当前索引：${index}`)
      },
      onChange (picker, value, index) {
        // Toast(`当前值：${value}, 当前索引：${index}`)
      },
      onCancel () {
        this.$emit('pickData', '')
        //Toast('取消')
      },
    },
  }
</script>

<style >
.van-picker__confirm{
  color: #1DA1F2 !important;
}
</style>
